<template>
  <div class="app-container">
    <div class="container-fluid">
     <div class="filter-container" id="Event">
         <span >
           <router-link :to="link"  v-if="userType.indexOf('ADMIN')>-1">
          <button type="button" class="el-button el-button--success"><span>New Record</span></button>
         </router-link>
        <el-input v-model="listQuery.keyword" placeholder="Keyword" clearable style="width: 200px;"  @keyup.enter.native="handleFilter" />
        <el-button  type="success" icon="el-icon-search" @click="handleFilter">
          Search
        </el-button>

         </span>

          <button type="button" class="el-button el-button--success fr" @click='onExport' v-if="userType.indexOf('ADMIN')>-1"><span>Export</span></button>

      </div>

      <el-table v-loading="listLoading"
       :data="list"
       @select="selectFn"
       @select-all="selectAllFn"
       element-loading-text="Loading" border fit highlight-current-row stripe    @sort-change="sort_change" >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="Activities"
         prop='activitiesName'
          sortable='custom'
        >
          <template slot-scope="scope">
            {{ scope.row.activitiesName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="Level" min-width="120"  prop='levelName'  sortable='custom' show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.levelName || '-' }}
          </template>
        </el-table-column>
       <!-- <el-table-column label="Class" width="100">
          <template slot-scope="scope">
            {{ scope.row.matchClassName || '-' }}
          </template>
        </el-table-column> -->
        <el-table-column label="Competition" prop='competition'  min-width="auto" sortable='custom' >
          <template slot-scope="scope">
            {{ scope.row.competition || '-' }}
           <!--  <el-divider  v-if='scope.row.name'></el-divider>
            {{ scope.row.tcName || '-' }} -->
          </template>
        </el-table-column>
        <!-- <el-table-column label="Name锛圕HT)" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">

              { scope.row.tcName || '-' }}
          </template>
        </el-table-column> -->
        <el-table-column label="Start Date" prop='startDate' width="120" sortable='custom'>
          <template slot-scope="scope">
            {{ scope.row.startDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="End Date" width="120" sortable='custom'  prop='endDate' >
          <template slot-scope="scope">
            {{ scope.row.endDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Location"  prop='location' sortable='custom'>
          <template slot-scope="scope">
            {{ scope.row.location || '-' }}
           <!--  <el-divider  v-if='scope.row.name'></el-divider> -->
             {{ scope.row.tcLocation || '-' }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="Location(TC)" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
         {{ scope.row.tcLocation || '-' }}
          </template>
        </el-table-column> -->

        <el-table-column label="Remark" width="100"  prop='hasRemarks'>
          <template slot-scope="scope">

          <i  :class="scope.row.hasRemarks  ? 'el-icon-star-on el-icon--success' :'el-icon-star-on-'"  />
          </template>
        </el-table-column>

        <el-table-column label="Countdown" prop='countdown' width="100">
          <template slot-scope="scope">
            <i :class="scope.row.countdown ? 'el-icon-star-on el-icon-success' :'el-icon-star-on='"  />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="" width="100">
          <template slot-scope="scope">
            <div style="text-align: center;">
              <router-link :to="`${link}?id=${scope.row.id}`">
                <el-button type="text" size="small">
                  <img src="../../assets/images/edit.svg" class="btn-icon">
                </el-button>
              </router-link>
              <router-link :to="`/event/addList?id=${scope.row.id}`">
                <el-button type="text" size="small">
                  <img src="../../assets/images/look.svg" class="btn-icon">
                </el-button>
              </router-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        layout="sizes, prev, pager, next"
        :page-size="1"
        :current-page="listQuery.page"
        :total="1"
        class="pagination-container"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
    // import {
    //     getInterList
    // } from '@/api/home'
    import store from '@/store'
    import { getEventList } from '@/api/event'
    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        data() {
            return {
             searchAsync:(data)=> {
               var { listQuery } = this
               return !listQuery.keyword ||
                String(data.activitiesName).toLowerCase().includes(listQuery.keyword.toLowerCase())||
                String(data.competition).toLowerCase().includes(listQuery.keyword.toLowerCase()) ||
                String(data.tcLocation).toLowerCase().includes(listQuery.keyword.toLowerCase()) ||
                String(data.location).toLowerCase().includes(listQuery.keyword.toLowerCase()) ||
                String(data.levelName).toLowerCase().includes(listQuery.keyword.toLowerCase())
                },
              userType: store.getters.userType,
              selectList:[],
                list: [],
                listLoading: true,
                listQuery: {
                    page: 1,
                    size: 25,
                    keyword:'',
                    total: 0,
                    column:'',
                    sorting:0,
                    token:''

                },
                link: '/event/addEdit'
            }
        },
        created() {

            this.fetchData()
        },
        watch:{
          selectList(val){
            this.selectEventIds = val.map(list=>list.id)

          }
        },
        methods: {
            //event 导表 fn
            onExport(){
              let params ={keyword:this.listQuery.keyword,token:this.listQuery.token  }
              this.selectEventIds?params.eventIds = JSON.stringify(this.selectEventIds):''
              console.log('this.selectEventIds',this.selectEventIds,this.selectList)
              debugger
              this.$store.dispatch('app/onExport',{barName:'event/manager',params})
            },
            fetchData() {
                getEventList(this.listQuery).then(response => {
                    this.listQuery.token =  response.result.exportToken
                    this.listQuery.total =  response.result.total
                      this.listQuery.page =  response.result.totalPage
                    this.list = response.result.list
                    this.listLoading = false
                })
            },
            selectAllFn(val){
              this.selectList = val
            },
            selectFn(val,or){
              this.selectList = val
              console.log('sd',val,or)
            },
            sort_change(column) {
                this.listQuery.page = 1
                if (column.prop && column.order) {
                    this.listQuery.sorting = column.order === 'ascending' ? 0 : 1
                    this.listQuery.column = column.prop
                    this.fetchData()
                }
                // this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
            },
             handleFilter() {
             this.fetchData()
          },
          // pageSize变化事件
          handleSizeChange(val) {
            this.listQuery.limit = val
            this.fetchData()
          },
          // pageNum变化事件
          handleCurrentChange(page) {
             this.listQuery.page = page
              this.fetchData()
          },
        }
    }
</script>
<style lang="scss" >
  body{
    .el-divider--horizontal{
      margin: 0 auto;
    }
    .cell{
      text-align: center;
    }
 }
</style>
